<template>
    <el-container class="bigData">
      <!-- 背景图片 -->
      <div class="background">
        <img :src="imgSrc" class="imgSrc"/>
      </div>

    <!-- 页面标题部分 -->
    <el-header class="bigDataHeader"> 
     
      <div class="bigDataTitle">
           <el-button class="bigDataButton" type="info" @click="returnIndex">返回</el-button>
          <span id="showNumber">迄今为止，鸡有322只，鸭有0只，鹅有113只，鸽子有70只</span>
          <h3>光禽大数据可视化平台</h3>
          <div class="bigDataTime">{{nowTime}}</div>
      </div>
      
    </el-header>

    <!-- 页面主体部分 -->
    <el-main class="bigDataMain">
      <el-row :gutter="15" class="bigDataRow">

        <!-- 第一列 -->
        <el-col :span="7">
          <!-- 禽类销售占比 -->
          <div class="panel poultrySellPie">
            <div class="allTitle">禽类销售占比</div>
            <div class="chart poultrySellEchart"></div>
            <div class="panel-footer">
            </div>
          </div>
          <!-- 脚标机状态图 -->
          <div class="panel">
            <div class="allTitle">脚标机状态图</div>
            <div class="chart barcodeMachineStatusEchart"></div>
            <div class="panel-footer"></div>
          </div>
          <!-- 销售去向市场 -->
          <div class="panel">
            <div class="allTitle">销售去向市场</div>
            <div class="chart relationEchart"></div>
            <div class="panel-footer"></div>
          </div>
          </el-col>

          <!-- 第二列 -->
        <el-col :span="10">
          <div class="selectBoxs">
            <el-select class="selectBox" v-model="value" placeholder="中山市">
            <!-- <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option> -->
          </el-select>
          <el-select class="selectBox" v-model="value" placeholder="黄圃镇">
          </el-select>
          <el-select class="selectBox" v-model="value" placeholder="汾江市场">
          </el-select>
          </div>

          <div class="map"></div>
          </el-col>

          <!-- 第三列 -->
        <el-col :span="7">
          <!-- 禽类销量 -->
          <div class="panel">
            <div class="allTitle">禽类销量</div>
            <div class="panel-footer"></div>
          </div>
          <!-- 档口数量 -->
          <div class="panel">
            <div class="allTitle">档口数量</div>
            <div class="panel-footer"></div>
          </div>
          <!-- 近三个月最大销量市场 -->
          <div class="panel">
            <div class="allTitle">近三个月最大销量市场 </div>
            <div class="panel-footer"></div>
          </div>
          </el-col>
      </el-row>
    </el-main>
    </el-container>
  
  
</template>

<script>
import echarts from "echarts";
export default {
  data() {
    return {
      imgSrc: require('../../assets/images/bg.jpg'),
      nowTime:'',
      // chartInstance:null,
      // allData:null,
      value:''
    };
    },
    mounted() {
      this.nowTimes()
      // this.initChart()
      // this.getData()

      // 获取禽类销售信息
      // this.requestPoultrySell()
      //获取脚标机状态信息
      // this.requestbarcodeMachineStatus()
    },

    beforeDestroy() {
      this.clear();
    },
    methods:{
      // 返回主页
      returnIndex(){
        this.$router.push('/homePage')
      },

       //显示当前时间（年月日时分秒）
      timeFormate(timeStamp) {
        let year = new Date(timeStamp).getFullYear();
        let month =new Date(timeStamp).getMonth() + 1 < 10?  (new Date(timeStamp).getMonth() + 1): new Date(timeStamp).getMonth() + 1;
        let date =new Date(timeStamp).getDate() < 10?  new Date(timeStamp).getDate(): new Date(timeStamp).getDate();
        let hh =new Date(timeStamp).getHours() < 10?  new Date(timeStamp).getHours(): new Date(timeStamp).getHours();
        let mm =new Date(timeStamp).getMinutes() < 10?  new Date(timeStamp).getMinutes(): new Date(timeStamp).getMinutes();
        let ss =new Date(timeStamp).getSeconds() < 10?  new Date(timeStamp).getSeconds(): new Date(timeStamp).getSeconds();
        // let week = new Date(timeStamp).getDay();
        // let weeks = ["日","一","二","三","四","五","六"];
        // let getWeek = "星期" + weeks[week];
        this.nowTime = year + "年" + month + "月" + date + "日" + "-" + hh + "时" + mm + "分" + ss + "秒";
      },
      nowTimes(){
        this.timeFormate(new Date());
        setInterval(this.nowTimes,1000);
        this.clear()
      },
      clear(){
        clearInterval(this.nowTimes)
        this.nowTimes = null;
      },

      // 初始化echarts
      // initChart(){
      //   this.chartInstance = this.$echarts.init(this.$ref.poultrySellRef);
      // },

    // 获取禽类销售信息
    // async requestPoultrySell() {
    //   try {
    //     const { data: res } = await this.$http.get(
    //       "PoultrySales/findSaleOfParent/to/piechart/by/house?houseId=${marketId}"  );
    //     console.log(res);
    //     this.allData = res;
    //     this.poultrySellEchart()
    //     if (res.code === 200) {
    //         this.poultrySellEchart(res.data);
    //     } else {
    //       this.$message.error("网络开小差了，请稍后重试 20001");
    //     }
    //   } catch (error) {
    //     this.$message.error("网络开小差了，请稍后重试 19999");
    //     console.log(error);
    //   }
    // },

    //获取脚标机状态信息
    // async requestbarcodeMachineStatus() {
    //     const { data: res } = await this.$http.get(
    //       "MachineChart/find/by/houseId?id=${marketId}");
    //     // console.log(res);
    //     if (res.code === 200) {
    //       this.poultrySellEchart(res.data);
    //   }
    //     // this.allData = res;   
    // },

    //获取销售市场信息
    // async requestrelation() {
    //     const { data: res } = await this.$http.get(
    //       "PoultrySales/findRelation/in/year?houseId=${marketId}");
    //     // console.log(res);
    //     if (res.code === 200) {
    //       this.relationEchart(res.data);
    //   }
    //     // this.allData = res;   
    // },

    //禽类销售饼状图 
    // poultrySellEchart() {
    //   let dataArr = data.object
    //   dataArr = dataArr.map(item => {
    //     let obj = {}
    //     obj.value = item.sale_count
    //     obj.name = item.poultry_parent_name
    //     return obj
    //   })
    //   var myChart = echarts.init(document.querySelector('.poultrySellEchart'));
    //   myChart.clear(); //清除状态
    //   let option = {
    //     tooltip: {
    //       trigger: 'item',
    //       formatter: '{a} <br/>{b} : {c} ({d}%)'
    //     },
    //     series: [{
    //       name: '禽类销售占比',
    //       type: 'pie',
    //       radius: '60%',
    //       center: ['50%', '60%'],
    //       data: dataArr,
    //       label: {
    //         formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}只  ',
    //         backgroundColor: '#eee',
    //         borderColor: '#aaa',
    //         borderWidth: 1,
    //         borderRadius: 4,
    //         rich: {
    //         a: {
    //           color: '#999',
    //           lineHeight: 22,
    //           align: 'center'
    //         },
    //         hr: {
    //           borderColor: '#aaa',
    //           width: '100%',
    //           borderWidth: 0.5,
    //           height: 0
    //         },
    //         b: {
    //           fontSize: 16,
    //           lineHeight: 33
    //         },
    //         per: {
    //           color: '#eee',
    //           backgroundColor: '#334455',
    //           padding: [2, 4],
    //           borderRadius: 2
    //         }
    //       }
    //       },
    //       labelLine: {
    //         lineStyle: {
    //           color: 'rgba(255, 255, 255, 0.9)'
    //         },
    //         smooth: 0.2,
    //         length: 10,
    //         length2: 20
    //       }
    //     }]
    //   }
    //   myChart.setOption(option);
    //   window.addEventListener("resize", function () {
    //     myChart.resize();
    //   });
    // },
  
    // 脚标机状态雷达图
    // barcodeMachineStatusEchart(){
    //   let dataArr = data.object
    //         if (dataArr.length == 0) {
    //             return
    //         }
    //         let seriesData = []
    //         let indicator = dataArr.map(item => {
    //             seriesData.push(item.size)
    //             return obj = {
    //                 text: item.status
    //             }
    //         })
    //         let pieData = dataArr.map((cur) => {
    //             const item = {
    //                 value: cur.size,
    //                 name: cur.status
    //             }
    //             return item
    //         })
    //         var myChart = echarts.init(document.querySelector('.barcodeMachineEchart'));
    //         let option = {
    //             radar: [{
    //                 indicator: indicator,
    //                 center: ['50%', '50%'],
    //                 radius: 70,
    //                 startAngle: 60,
    //                 splitNumber: 4,
    //                 shape: 'circle',
    //                 name: {
    //                     formatter: '{value}',
    //                     textStyle: {
    //                         color: '#72ACD1'
    //                     }
    //                 },
    //                 splitArea: {
    //                     areaStyle: {
    //                         color: ['rgba(114, 172, 209, 0.2)',
    //                             'rgba(114, 172, 209, 0.4)', 'rgba(114, 172, 209, 0.6)',
    //                             'rgba(114, 172, 209, 0.8)', 'rgba(114, 172, 209, 1)'
    //                         ],
    //                         shadowColor: 'rgba(0, 0, 0, 0.3)',
    //                         shadowBlur: 10
    //                     }
    //                 },
    //                 axisLine: {
    //                     lineStyle: {
    //                         color: 'rgba(255, 255, 255, 0.5)'
    //                     }
    //                 },
    //                 splitLine: {
    //                     lineStyle: {
    //                         color: 'rgba(255, 255, 255, 0.5)'
    //                     }
    //                 }

    //             }, ],
    //             series: [{
    //                     name: '脚标记状态',
    //                     type: 'radar',
    //                     emphasis: {
    //                         lineStyle: {
    //                             width: 5
    //                         }
    //                     },
    //                     data: [{
    //                         value: seriesData,
    //                         areaStyle: {
    //                             color: 'rgba(255, 255, 255, 0.5)'
    //                         },
    //                         label: {
    //                             show: true,
    //                             formatter: function(params) {
    //                                 return params.value;
    //                             }
    //                         }
    //                     }]
    //                 },

    //             ]
    //         }
    //         myChart.setOption(option);
    //         window.addEventListener("resize", function() {
    //             myChart.resize();
    //         });
        
    // },

    // 销售去向市场关系图
    // relationEchart(){
    //   let dataArr = data.object
    //         if (dataArr.length == 0) {
    //             return
    //         }
    //         dataArr = dataArr.reduce(function(item, next) {
    //             console.log(item)
    //             obj[next.houseName] ? "" : obj[next.houseName] = true && item.push(next);
    //             return item;
    //         }, []);

    //         let dataLink = []

    //         let dataRel = dataArr.map((item, i) => {
    //             let j = i >= 1 ? 1 : 0
    //             let size = i >= 1 ? 40 : 70
    //             let objLink = {
    //                 source: 0,
    //                 target: i,
    //                 value: ''
    //             }
    //             dataLink.push(objLink)
    //             return objRel = {
    //                 name: item.houseName,
    //                 draggable: true, // 是否可以拖拽，默认false
    //                 category: j, // 这是种类，运维1测试2应用3实施4开发5
    //                 number: i, // 这是编号 非必须，目的仅为方便编写line
    //                 value: [30, 5], //图形大小
    //                 symbolSize: size,
    //                 showNum: item.saleCount //节点需要显示的额外内容
    //             }
    //         })
    //         var myChart = echarts.init(document.getElementById('relationEchart'), 'macarons');
    //         let option = {
    //             tooltip: {},
    //             animationDurationUpdate: 1500,
    //             animationEasingUpdate: 'quinticInOut',
    //             legend: {
    //                 x: "center",
    //                 show: true,
    //                 data: [] // 此处不显示根节点学生
    //             },
    //             series: [{
    //                 type: 'graph',
    //                 layout: 'force',
    //                 symbolSize: function(size) {
    //                     return size;
    //                 },
    //                 edgeSymbol: ['circle', 'arrow'],
    //                 edgeSymbolSize: [0, 8],
    //                 edgeLabel: {
    //                     normal: {
    //                         show: true,
    //                         textStyle: {
    //                             fontSize: 10
    //                         },
    //                         formatter: "{c}"
    //                     }
    //                 },
    //                 force: {
    //                     repulsion: 2500,
    //                     edgeLength: [1, 5]
    //                 },
    //                 focusNodeAdjacency: true,
    //                 roam: true,
    //                 categories: [{
    //                     name: '11',
    //                 }, {
    //                     name: '00',
    //                 }],
    //                 label: {
    //                     normal: {
    //                         show: true,
    //                         textStyle: {
    //                             fontSize: 12
    //                         },
    //                     }
    //                 },
    //                 force: {
    //                     repulsion: 600
    //                 },
    //                 tooltip: {
    //                     formatter: function(node) { // 区分连线和节点，节点上额外显示其他数字
    //                         if (!node.value) {
    //                             return node.data.name;
    //                         } else {
    //                             return node.data.name + ":" + node.data.showNum;
    //                         }
    //                     },
    //                 },
    //                 lineStyle: {
    //                     normal: {
    //                         opacity: 0.9,
    //                         width: 2,
    //                         curveness: 0.2
    //                     }
    //                 },
    //                 data: dataRel,
    //                 links: dataLink
    //             }]
    //         };

    //         myChart.setOption(option);
    //         window.addEventListener("resize", function() {
    //             myChart.resize();
    //         });
        
    // }

  },
}
</script>

<style lang="less" scoped>
// 背景图片
.background {
  width: 105% !important;
  height: 100% !important;
  z-index: -10;
  position: fixed;
  top:0px !important;
  left:-25px !important;
  background-repeat: no-repeat; 
  background-size: 100% 100%;
}

.imgSrc{
	height: 100%;
	width: 100%;
}

.bigDataHeader{
  padding:0 !important;
}

// 大数据标题
.bigDataTitle{
  margin:0 !important;
  padding:0 !important;
  height:80px;
  background:url(../../assets/images/head_bg.png) no-repeat;
  background-size: 100% 100%;
  // position:relative;
  // display:flex;
  // flex:1;
  color:white;
  h3{
    display: inline-block;
    // flex:4;
    text-align: center;
    font-weight:normal;
    font-size: 28px;
    margin-left:8%;
    margin-top:15px;
  }
  
}

// 返回按钮
.bigDataButton{
  width:100px;
  position: absolute;
  left:10px;
  top:10px;
  font-size: 15px !important;
}

.bigDataTitle .el-button--info{
  background-color:rgb(0, 123, 255) !important;
  border-color:rgb(0, 123, 255) !important;
}

.bigDataButton:hover{
  background-color:rgb(0, 105, 217) !important; 
}

// 大数据标题内展示的数据
#showNumber{
  align-self: center;
  // flex:1;  
  font-size: 12px;
  margin-left:15%;
}

// 实时时间
.bigDataTime{
  font-size: 12px;
  position:absolute;
  top:20px;
  // flex:2;
  right:10px;
  color:rgba(255, 255, 255, .7);
}

// 主体部分
.bigDataMain{
  margin-top:25px;
}

.bigDataRow{
  width:100%;
  margin:0px !important;
}

// 公共盒子
.panel{
  height:160px;
  border: 1px solid rgba(25, 186, 139, .17);
  padding: 0 20px 40px;
  background: url(../../assets/images/line.png) rgba(255, 255, 255, .04);
  background-size: 100% auto;
  position: relative;
  margin:0 6px;
  margin-bottom: 15px;
  z-index: 10;
  &::before{
    position: absolute;
    top:0;
    left:0;
    width:5px;
    height:5px;
    border-left: 2px solid #02a6b5;
    border-top: 2px solid #02a6b5;
    content:"";
  }
  &::after{
    position: absolute;
    top:0;
    right:0;
    width:5px;
    height:5px;
    border-right: 2px solid #02a6b5;
    border-top: 2px solid #02a6b5;
    content:"";
  }
}

.panel-footer{
  position: absolute;
  bottom:0;
  left:0;
  width:100%;
  &::before{
  position: absolute;
  bottom:0;
  left:0;
  width:5px;
  height:5px;
  border-left: 2px solid #02a6b5;
  border-bottom: 2px solid #02a6b5;
  content:"";
}
  &::after{
    position: absolute;
    bottom:0;
    right:0;
    width:5px;
    height:5px;
    border-right: 2px solid #02a6b5;
    border-bottom: 2px solid #02a6b5;
    content:"";
  }
}

// 公用文字标题
.allTitle{
  color:#fff;
  text-align: center;
  line-height: 30px;
  }

// 市区市场选择
.selectBoxs{
  display: flex;
  flex:1;
  // padding:0 10px;
}

.selectBox{
  margin:0 10px;
}
</style>